# Mobile First

В разработке мы используем правило Mobile First. (opens new window)

First things first — mobile as a default

Начинаем разработку - с мобильного размера.

Прими минимальный размер как 320px. Начни писать все стили для него и постепенно переходи на размер побольше.

Советую опираться на сетку Bootstrap (opens new window). Придерживайся их размеров.

Вот подробное описание (opens new window) как использовать media-queries.

Ты начинаешь от меньшего и двигаешься к XL(конечная точка - зависит от дизайна)

Как это будет выглядеть, спросишь ты, или не спросишь, но я отвечу:


.card 
  font-size: 12px
  @media (min-width: 576px)
    font-size: 13px
  @media (min-width: 768px)
    font-size: 14px
  @media (min-width: 992px)
    font-size: 15px
  @media (min-width: 1200px)
    font-size: 16px

Пример притянуй за уши, но суть понятна. Так мы и выходим на размер шрифта 16, как в дизайне.